<template>
  <view class="content">
    <view class="commentstop">
      <view>{{ orderlist.merchantName }}</view>
      <view v-for="(item, index) in orderlist.orderProductsList" :key="index" style="display: flex;margin-top:18rpx;">
        <view>
          <image style="width: 156rpx; height:132rpx;" :src="item.productImg" mode="scaleToFill" />
        </view>
        <view style="margin-left: 24rpx; flex:1;">
          <view style="font-weight: 400;font-size: 32rpx;color: #000000;">{{ item.productName }}</view>
          <view style="display: flex; justify-content: space-between;margin-top:38rpx;align-items:center;">
            <view style="font-weight: 400;font-size: 26rpx;color: #999999;">x{{ item.productCount }}</view>
            <view>
              <text style="font-weight: bold;font-size: 28rpx;color: #FF0000;margin-right:10rpx;">退款金额</text>
              <text style="font-weight: bold;font-size: 28rpx;color: #FF0000;">￥</text>
              <text style="font-weight: bold;font-size: 36rpx;color: #FF0000;">{{ item.productTotalPrice / 100
                }}</text>
            </view>
          </view>
        </view>
      </view>
      <view style="display: flex; justify-content:space-between;margin-top:24rpx;">
        <view style="font-weight: 400;font-size: 32rpx;color: #000000;">支付方式</view>
        <view style="display: flex; align-items:center;">
          <image style="width:36rpx;height:36rpx;" src="../static/image/pagesDelivery/alipay.png" mode="scaleToFill" />
          <text style="font-weight: 600; color: #424141;">支付宝</text>
        </view>
      </view>
    </view>
    <view style="margin-top: 18rpx;" class="commentstop">
      <view>退款原因</view>
      <u-form :model="form" ref="uForm">
        <u-form-item :border-bottom="false" label="" prop="name">
          <view style="display:flex;justify-content:space-between;border:1rpx solid #ccc; width:100%;padding:0 24rpx;"
            @tap="show = true">
            <view class="black" v-if="form && form.name">
              {{ form.name }}
            </view>
            <view class="" v-else>
              请选择退款原因
            </view>
            <view><u-icon name="arrow-right"></u-icon></view>
          </view>
        </u-form-item>
        <view>
          退款说明
        </view>
        <u-form-item :border-bottom="false" label="" prop="intro">
          <u-input :border="true" placeholder="请填写退款说明" v-model="form.intro" type="textarea" :height="172"
            :auto-height="true" />
        </u-form-item>
        <view>
          上传图片
        </view>
        <u-form-item :border-bottom="false">
          <view style="margin-top: 18rpx;">
            <view class="pre-box">

              <u-upload width="140" height="140" :custom-btn="true" @on-choose-fail="onChooseFail"
                :before-remove="beforeRemove" ref="uUpload" :show-upload-list="true" :action="action"
                :auto-upload="true" :file-list="fileList" :show-progress="true" :deletable="true" :header="uploadToken"
                :max-count="3" @on-list-change="onListChange" :on-remove="uploadRemove" @on-success="uploadSuccess" :size-type="['compressed']" :max-size="FileSize">
                <view slot="addBtn">
                  <image src="/static/image/upload_icon.png" mode=""
                    style="width: 140rpx;height: 140rpx;border-radius: 12rpx;"></image>
                </view>
              </u-upload>
            </view>
          </view>
        </u-form-item>
      </u-form>
    </view>
    <view @tap="submit" class="comment">
      <text>退款</text>
    </view>
    <u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj" @confirm='refund'
      range-key="cateName"></u-picker>
  </view>
</template>

<script>
import { getUserOrderInfo, orderReturn } from '@/api/common'
import { BASE_URL_IMG } from '@/api/request'
import { FileSize } from '@/common/fileSize';
export default {
  data() {
    return {
      FileSize,
      form: {
        name: '',
        intro: '',
      },

      rules: {
        name: [
          {
            required: true,
            message: '请输入选择',
            // 可以单个或者同时写两个触发验证方式 
            trigger: ['change', 'blur'],
          }
        ],
        intro: [
          {
            required: true,
            min: 5,
            message: '退款说明不能小于五个字',
            trigger: 'change'
          }
        ]
      },


      show: false,
      selectorObj: [
        {
          cateName: '未收到货',
          id: 1
        },
        {
          cateName: '与内容不符',
          id: 2
        }
      ],
      lists: [],
      action: '',
      fileList: [],
      nowFileList: [],
      uploadToken: {
        Authorization: ''
      },
      background: {
        backgroundColor: '#F5F5F5',
      },
      backgroundtwo: {
        backgroundColor: '#FFFFFF',
      },
      orderNum: '',
      orderlist: []
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(e) {
    this.action = BASE_URL_IMG
    console.log('BASE_URL', this.action);
    this.uploadToken.Authorization = uni.getStorageSync('token')
    console.log('eeeeeeeeeee', e)
    this.orderNum = e.orderNum
    this.getorder()
  },
  
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let obj = {
            orderNum: this.orderNum,
            refReason: this.form.name,
            refExplain: this.form.intro,
            orderRefImgList: this.nowFileList
          }
          orderReturn(obj).then(res => {
            console.log('resresres', res)
            uni.navigateBack({
              delta:0,
              orderNum: this.orderNum
            })
          })
        } else {
          console.log('验证失败');
        }
      });
    },
    refund(data) {
      console.log(data)
      this.form.name = this.selectorObj[data].cateName
    },
    deleteItem(index) {
      console.log('1')
      this.$refs.uUpload.remove(index);
    },
    onChooseFail(e) {
      console.log(e);
    },
    beforeRemove(index, lists) {
      this.nowFileList.splice(index,1)

    },
    onListChange(lists) {
      console.log('onListChange', lists);
      this.lists = lists;
    },
    uploadRemove(index) {
      // this.nowFileList.push(e.data)
      this.nowFileList.splice(index,1)
      console.log("aaa", e);
    },
    uploadSuccess(e) {
      this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    //订单详情
    getorder() {
      let obj = {
        orderNum: this.orderNum
      }
      getUserOrderInfo(obj).then(res => {
        console.log('resres', res)
        this.orderlist = res.data
      })
    },
    //退款

  },
};
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 24rpx 32rpx 0 32rpx;

  .commentstop {
    padding: 32rpx 24rpx;
    background-color: white;
    border-radius: 8rpx;

    .pre-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      // .pre-box ::v-deep(.data-v-2e00e22c) {
      // 	width: 0rpx;
      // }	
      .pre-item {
        width: 160rpx;
        height: 150rpx;
        border-radius: 12rpx;
        overflow: hidden;
        position: relative;
        margin: 0 10rpx;
        margin-bottom: 20rpx;
        display: flex;
      }

      .pre-item-image {
        width: 100%;
        height: 100%;
      }

      .u-delete-icon {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 10;
        background-color: $u-type-error;
        border-radius: 100rpx;
        width: 44rpx;
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .comment {
    position: fixed;
    bottom: 58rpx;
    border-radius: 1998rpx;
    padding: 26rpx 310rpx;
    text-align: center;
    background-color: #D12C25;
    color: white;
  }
}
</style>